<template>
  <div id="echarts2"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts2()
  },
  created() {},
  methods: {
    showEcharts2() {
      let myChart = this.$echarts.init(document.getElementById('echarts2'))
      let data = this.data
      let xData = data.map((v) => v.name),
        yData = data.map((v) => v.value)

      let option = {
        grid: {
          top: '5%',
          left: 0,
          bottom: '5%',
          right: 0,
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
        },
        animation: false,
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              color: '#fff',
              fontSize: 12,
              lineHeight: 18,
              formatter: function (val) {
                var strs = val.split('') //转化为字符串数组
                var str = ''
                for (var i = 0, s; (s = strs[i++]); ) {
                  str += s
                  if (!(i % 5))
                    //五个字符换行
                    str += '\n'
                }
                return str
              },
            },
            interval: 1,
          },
        ],
        yAxis: [
          {
            show: true,
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#384267',
                type: 'dashed',
              },
            },
            // 数值
            axisLabel: {
              color: '#ddd',
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: '上部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [30, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            label: {
              normal: {
                show: true,
                position: 'top',
                fontSize: 14,
                fontWeight: 'bold',
                color: '#5BFCF4',
              },
            },
            color: '#5BFCF4',
            data: yData,
          },
          {
            name: '底部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [30, 10],
            symbolOffset: [0, 7],
            z: 12,
            color: '#5BFCF4',
            data: yData,
          },
          {
            name: '内层波浪',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [40, 15],
            symbolOffset: [0, 12],
            z: 10,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: '#5BFCF4',
                borderType: 'solid',
                borderWidth: 8,
              },
            },
            data: yData,
          },
          {
            name: '外层波浪',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [50, 20],
            symbolOffset: [0, 18],
            z: 10,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: 'rgba(91,252,244,0.5)',
                borderType: 'solid',
                borderWidth: 5,
              },
            },
            data: yData,
          },
          {
            name: '',
            type: 'bar',
            barWidth: 30,
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
              // 柱状图渐变色
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: 'rgba(210,210,210,0.3)',
                  },
                  {
                    offset: 1,
                    color: '#5BFCF4',
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: yData,
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
